/* eslint-disable react-refresh/only-export-components */
import React, { useEffect, useMemo, useState } from "react";
import { listaApi } from "../../api/list";
import Header from "../../comdentens/Header";
import styles from "./css/index.module.css";
import {
  Navigate,
  useLoaderData,
  useNavigate,
  useSearchParams,
} from "react-router-dom";
import List from "./cnmdcnm/List";
import { InfiniteScroll } from "antd-mobile";
function Index() {
  const tiao = useNavigate();
  const { list } = useLoaderData();
  const [shuju, setshuju] = useState(list);
  const [sp] = useSearchParams();
  const start = sp.get("start");
  const end = sp.get("end");
  const date = sp.get("date");
  const isSpeed = sp.get("isSpeed");
  const dianji = (id) => {
    tiao(`/xqy/${id}?start=${start}&end=${end}`);
  };
  const [pag, setpag] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  async function loadMore() {
    console.log("aaa");

    setpag((pav) => pav + 1);
    setHasMore(false);
  }
  useEffect(() => {
    console.log(pag);
    // setHasMore(true)
    const data = {
      start: start,
      end: end,
      date: date,
      isSpeed: isSpeed,
      pag: pag,
    };
    jishuan(data);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pag, pag]);
  const jishuan = async (data) => {
    const { data: res } = await listaApi(data);
    setshuju((pav) => [...pav, ...res]);
    setHasMore(true);
  };
  return (
    <div className={styles.box}>
      <Header title="门票列表"></Header>
      <div className={styles.div1}>
        {shuju.map((item, index) => (
          <span key={index} onClick={() => dianji(item.id)}>
            <List {...item} />
          </span>
        ))}
      </div>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
}

export default Index;

export const loader = async ({ request }) => {
  const url = new URL(request.url);
  const data = Object.fromEntries(url.searchParams);
  const { data: res } = await listaApi(data);
  return { list: res };
};
